<template>
  <div class="giant_screen">
    <!--    <div class="website_title">欢迎登陆摩尔烯后台管理系统</div>-->
    <div class="box_login_wrap">
      <div class="blw_title">
        欢迎登陆Awesome Web
      </div>
      <div class="blw_box">
        <el-form :model="formData" label-position="top">
          <el-form-item label="用户名">
            <el-input v-model="formData.username" placeholder="请输入用户名" clearable style="width:100%"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input @keydown.enter="handleLogin" v-model="formData.password" placeholder="请输入密码" style="width:100%" type="password" :show-password="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="blw_btns">
        <el-button style="width:100%" type="primary"  @click="handleLogin" :loading="loginLoading">登 录</el-button>
      </div>
      <!-- <div class="blw_siginup">
        没有账号？<span class="sign_up_text" @click="handleTestMSG">点击注册</span>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { userStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
import FSMessage from '@/utils/message'
import { regist } from '@/api/user'
import md5 from 'md5'
import 'element-plus/theme-chalk/el-button.css'

const router = useRouter()
const store = userStore()
const formData = reactive({
  username: '',
  password: ''
})
const loginLoading = ref(false)

const handleLogin = (): void => {
  loginLoading.value = true
  formData.password = md5(formData.password)
  store.login(formData).then((res) => {
    loginLoading.value = false
    // 用户登陆后跳转的页面
    router.push({ path: '/index' })
  })
    .catch((e) => {
      loginLoading.value = false
    })
}

const handleTestMSG = async () => {
  try {
    await regist(formData)
  } catch (e) {
    console.log(e)
  }
}
</script>

<style lang="less" scoped>
.giant_screen {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/login-background.jpg");
  background-size: cover;
}

.website_title {
  position: absolute;
  top: 23%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%, 0);
}

.box_login_wrap {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 351px;
  height: 375px;
  top: 50%;
  left: 50%;
  padding: 20px 12px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  .blw_title {
    font-size: 20px;
    font-weight: bold;
  }
  .blw_box {
    width: 100%;
  }
  .blw_btns {
    width: 100%;
  }
  .sign_up_text {
    color: #6190e8;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
